<template>
  <ADrawerPro title="修改菜单" width="640px" v-bind="$attrs" :open="props.open" :closable="false">
    <div class="content-container">
      <ASpin :spinning="spinning">
        <AForm ref="formRef" :model="formState" @finish="onFinish" @reset="onReset">
          <AFormItem label="菜单类型" name="menuType">
            <ARadioGroup v-model:value="formState.menuType" disabled>
              <ARadio value="CATALOG">目录</ARadio>
              <ARadio value="MENU">菜单</ARadio>
              <ARadio value="BUTTON">按钮</ARadio>
            </ARadioGroup>
          </AFormItem>

          <template v-if="formState.menuType === 'CATALOG'">
            <AFormItem label="菜单名称" name="menuName" :rules="menuRules.menuName">
              <AInput v-model:value="formState.menuName" placeholder="请输入菜单名称"></AInput>
            </AFormItem>
            <div class="form-group">
              <AFormItem label="菜单图标" name="menuIcon">
                <SelectIcon v-model:value="formState.menuIcon" placeholder="请输入菜单图标"></SelectIcon>
              </AFormItem>
              <AFormItem label="显示顺序" name="orderNum">
                <AInputNumber id="inputNumber" v-model:value="formState.orderNum" />
              </AFormItem>
            </div>

            <div class="form-group">
              <AFormItem label="路由地址" name="menuPath" :rules="menuRules.menuPath">
                <AInput v-model:value="formState.menuPath" placeholder="请输入路由地址"></AInput>
              </AFormItem>
              <AFormItem label="菜单状态" name="status">
                <ARadioGroup v-model:value="formState.status">
                  <ARadio :value="0">正常</ARadio>
                  <ARadio :value="1">停用</ARadio>
                </ARadioGroup>
              </AFormItem>
            </div>
          </template>

          <template v-if="formState.menuType === 'MENU'">
            <AFormItem label="菜单名称" name="menuName" :rules="menuRules.menuName">
              <AInput v-model:value="formState.menuName" placeholder="请输入菜单名称"></AInput>
            </AFormItem>
            <div class="form-group">
              <AFormItem label="菜单图标" name="menuIcon">
                <SelectIcon v-model:value="formState.menuIcon" placeholder="请输入菜单图标"></SelectIcon>
              </AFormItem>
              <AFormItem label="显示顺序" name="orderNum">
                <AInputNumber id="inputNumber" v-model:value="formState.orderNum" />
              </AFormItem>
            </div>

            <div class="form-group">
              <AFormItem label="组件地址" name="component" :rules="menuRules.component">
                <AInput v-model:value="formState.component" placeholder="请输入组件地址"></AInput>
              </AFormItem>
              <AFormItem label="权限标识" name="menuCode" :rules="menuRules.menuCode">
                <AInput v-model:value="formState.menuCode" placeholder="请输入权限标识"></AInput>
              </AFormItem>
            </div>

            <div class="form-group">
              <AFormItem label="路由地址" name="menuPath" :rules="menuRules.menuPath">
                <AInput v-model:value="formState.menuPath" placeholder="请输入路由地址"></AInput>
              </AFormItem>
              <AFormItem label="路由参数" name="query" :rules="menuRules.query">
                <AInput v-model:value="formState.query" placeholder="请输入路由参数"></AInput>
              </AFormItem>
            </div>
            <div class="form-group">
              <AFormItem label="链接类型" name="linkType">
                <ARadioGroup v-model:value="formState.linkType">
                  <ARadio :value="0">内部</ARadio>
                  <ARadio :value="1">外部</ARadio>
                </ARadioGroup>
              </AFormItem>
              <AFormItem label="标签离开" name="tabClose">
                <ARadioGroup v-model:value="formState.tabClose">
                  <ARadio :value="0">不关闭</ARadio>
                  <ARadio :value="1">关闭</ARadio>
                </ARadioGroup>
              </AFormItem>
            </div>
            <div class="form-group">
              <AFormItem label="显示状态" name="visible">
                <ARadioGroup v-model:value="formState.visible">
                  <ARadio :value="0">显示</ARadio>
                  <ARadio :value="1">隐藏</ARadio>
                </ARadioGroup>
              </AFormItem>
              <AFormItem label="菜单状态" name="status">
                <ARadioGroup v-model:value="formState.status">
                  <ARadio :value="0">正常</ARadio>
                  <ARadio :value="1">停用</ARadio>
                </ARadioGroup>
              </AFormItem>
            </div>
          </template>

          <template v-if="formState.menuType === 'BUTTON'">
            <div class="form-group">
              <AFormItem label="按钮名称" name="menuName" :rules="menuRules.buttonName">
                <AInput v-model:value="formState.menuName" placeholder="请输入按钮名称"></AInput>
              </AFormItem>
              <AFormItem label="显示顺序" name="orderNum">
                <AInputNumber id="inputNumber" v-model:value="formState.orderNum" />
              </AFormItem>
            </div>

            <div class="form-group">
              <AFormItem label="权限标识" name="menuCode" :rules="menuRules.menuCode">
                <AInput v-model:value="formState.menuCode" placeholder="请输入权限标识"></AInput>
              </AFormItem>
              <AFormItem label="菜单状态" name="status">
                <ARadioGroup v-model:value="formState.status">
                  <ARadio :value="0">正常</ARadio>
                  <ARadio :value="1">停用</ARadio>
                </ARadioGroup>
              </AFormItem>
            </div>
          </template>

          <AFormItem style="text-align: center">
            <ASpace>
              <AButton html-type="reset">取消</AButton>
              <AButton type="primary" html-type="submit" :loading="loading">提交</AButton>
            </ASpace>
          </AFormItem>
        </AForm>
      </ASpin>
    </div>
  </ADrawerPro>
</template>

<script setup>
import { ref, toValue, watch } from 'vue';
import { ADrawerPro } from '@/components/iteration';
import { SelectIcon } from '@/components/common';
import { useState, useFetch } from '@/hooks';
import { menuRules } from '@/constants/rules';
import { fetchGetMenu } from '@/api/system/menu';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  open: { type: Boolean, default: false },
  menuId: [Number, String],
  treeData: { type: Array, default: () => [] },
  treeFieldNames: {
    type: Object,
    default: () => ({ value: 'value', label: 'title', children: 'children' })
  },
  onFinish: Function,
  onCancel: Function
});

const defaultValues = {
  parentId: '0',
  menuType: 'CATALOG',
  orderNum: 1,
  visible: 0,
  status: 0,
  linkType: 0,
  tabClose: 0
};

const formRef = ref();
const [formState, setFormState] = useState(defaultValues);
const [loading, setLoading] = useState(false);

const { spinning, onFetch } = useFetch(fetchGetMenu, false);

watch(
  () => props.open,
  async (val) => {
    if (val) {
      const res = await onFetch(props.menuId);
      setFormState(res);
    }
  }
);
const onFinish = async (values) => {
  try {
    setLoading(true);
    await props.onFinish?.(values);
    toValue(formRef).resetFields();
  } catch (error) {
    await Promise.reject(error);
  } finally {
    setLoading(false);
  }
};

const onReset = () => {
  toValue(formRef).resetFields();
  setFormState(defaultValues);
  props.onCancel?.();
};
</script>

<style lang="scss" scoped>
.content-container {
  padding: 24px;
  user-select: none;
}

.ant-form {
  :deep(.form-group) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  :deep(.ant-form-item) {
    .ant-form-item-label {
      width: 80px;
    }

    .ant-input-number {
      width: 100%;
    }
  }
}
</style>
